<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由初步</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <script src="../js/axios.js"></script>
    <style>
        .box{
            width:460px;
            min-height:300px;
            border-radius: 20px;
            border:1px solid darkkhaki;
            margin: 20px;
            padding:30px;
            cursor: pointer;
            
        }
        .sbox{
            width:300px;
        }
        .router-link-exact-active , .router-link-active{
            color:brown;
            font-size: 30px;
            font-weight: 800;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>title = {{ title}} </h2>
        <my-head></my-head>
        <!-- 5. 路由出口  路由匹配到的组件将渲染在这里  展示组件内容 -->
        <div class="box">
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
        <!-- 6.  路由导航 -->
    </div>

    <template id="myapp">
        <div>
            <h2>微信App</h2>
            <div class="box sbox">
                <!-- <keep-alive> -->
                    <router-view></router-view>
                <!-- </keep-alive> -->
            </div>
            
            <Foot></Foot>
        </div>
    </template>

    <template id="wechat">
        <div>
            <h2>微信聊天 - wechat </h2>
        </div>
    </template>


    <template id="contact">
        <div>
            <h2>通讯录 - contact </h2>
            <ul>
                <li v-for="(item,index) in list " :key="index">
                    <router-link :to="{name:'detail',params:{proid:item.proid }, query:{proname:item.proname }}">
                        <img :src="item.img1" alt="" style="width:100px;height:100px;">
                        <h2>{{item.proname}} </h2>
                    </router-link>
                </li>
            </ul>
        </div>
    </template>


    <template id="find">
        <div>
            <h2>发现 - find </h2>
        </div>
    </template>

    <template id="mine">
        <div>
            <h2>个人中心 - mine </h2>
        </div>
    </template>

    <template id="foot">
        <div>
            <router-link v-for="(item,index) in fts" :key="index" :to="{name:item.name }">
                {{item.text}}
            </router-link>
        </div>
    </template>

    <template id="detail">
        <div>
            <h2>详情 --- detail </h2>
            <h2>proid == {{$route.params.proid }}</h2>
            <h2>proname == {{ $route.query.proname  }}</h2>
            <button @click="goback">返回</button>
            <button @click="gotopage" >出去发现美丽 find </button>
        </div>
    </template>

    <script>
        // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)   脚手架 vite 

        const Head = {
            template:"<header>Head - Head - WH2309 </header>"
        }
        Vue.component("my-head",Head)
        // 1.  定义 (路由) 组件。
        const App = {
            template:"#myapp"
        }
        const Wechat = {
            template:"#wechat"
        }
        const Contact = {
            template:"#contact",
            data(){
                return {
                    list:[]
                }
            },
            methods:{
                async getListData(){
                    let res = await axios.get("https://lhx123.love:3000/api/pro/list")
                    console.log(res)
                    this.list = res.data.data 
                }
            },
            mounted(){
                this.getListData()
            }
        }
        const Find = {
            template:"#find"
        }
        const Mine = {
            template:"#mine"
        }

        const NotFound = {
            template:"<h2>404 - 404 - NotFound </h2>"
        }

        const Detail = {
            template:"#detail",
            methods:{
                goback(){
                    // this.$router.go(-1)
                    // this.$router.back()
                    // router.go(-1)
                    router.back()
                },
                gotopage(){
                    // this.$router = router 
                    this.$router.push('/app/find')
                    // this.$router.push({path:'/app/find'})
                    // this.$router.push({name:'find'}) 
                    // this.$router.push({ name:'find',query:{uid:1314 }} )
                }
            },
            // 组件独享的守卫 
            beforeRouteEnter(to,from,next){
                console.log('进入路由组件之前 - beforeRouterEnter')
                next()
            },
            beforeRouteUpdate(to,from,next){
                console.log('路由组件数据更新之前 - beforeRouterUpdate')
                next()
            },
            beforeRouteLeave(to,from,next){
                console.log('离开当前路由之前 - beforeRouterLeave')
                if(window.confirm("亲,你真的要离开我吗~~~~")){
                    next()
                }else{
                    next(false)
                }
            },

        }
        const Footer = {
            template:"#foot",
            data(){
                return {
                    fts:[
                    {
                        path:"/app/wechat",
                        name:'wechat',
                        text:'微信'
                    },
                    {
                        path:"/app/contact",
                        name:'contact',
                        text:'通讯录'
                    },
                    {
                        path:"/app/find",
                        name:'find',
                        text:'发现' 
                    },
                    {
                        path:"/app/mine",
                        name:'mine',
                        text:'我的'  
                    }
                    ]
                }
            }
        }
        Vue.component("Foot",Footer)

        // 2. 定义路由
        // 每个路由应该映射一个组件。 
        const routes = [
            {
                path:'/',
                redirect:"/app"
            },
            {
                path:'/app',
                name:'app',
                component:App,
                redirect:'/app/wechat',
                children:[  // 子路由 嵌套路由 
                    {
                        path:"/app/wechat",
                        name:'wechat',
                        component:Wechat 
                    },
                    {
                        path:"/app/contact",
                        name:'contact',
                        component:Contact 
                    },
                    {
                        path:"/app/find",
                        name:'find',
                        component:Find  
                    },
                    {
                        path:"/app/mine",
                        name:'mine',
                        component:Mine  
                    }
                ]
            },
            {
                path:'/detail/:proid',
                name:"detail",
                component:Detail, 
                beforeEnter(to,from,next){
                    
                    if(window.confirm('你确定要进入当前详情Detail页面吗?')){
                        next()
                    }else{
                        next(false) 
                    }
                    console.log("路由独享的守卫  === beforeEnter")
                }
            },
            {
                path:'/404',
                name:'notfound',
                component:NotFound
            },
            {
                path:"*",
                redirect:'/404'
            }
        ]
        // 3. 创建 router 实例，然后传 `routes` 配置
        const router = new VueRouter({
            routes:routes,
            mode:"hash", // 路由模式 
            base:"/wh2309/vue2",   
            // scrollBehavior (to, from, savedPosition) {  // 记录滚动条的行为 
            //     // return 期望滚动到哪个的位置
            //     // return 0;
            // }
        })
        // 其他属性 
        // routes 路由配置选项 
        // base  项目基路径  (上线的时候需要设置 )
        // mode  路由模式   默认hash 
        // hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器  
        // history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。 

        // hash  url地址的 hash 模式  兼容性强     带#号 可以刷新浏览器  但是地址比较长 不简洁
        // history  不带 # 号  不能刷新浏览器 (需要服务器重定向404 )   比较简洁优雅   依赖 HTML5 History API 和服务器配置
        // 强制 把 hash 切换为 history  (配置服务器的 404 的重定向 )

        // 路由前置守卫
        router.beforeEach((to,from,next)=>{
            console.log('所有的路由守卫 进入路由之前 ' + to.name) 
            next()  // 进入当前路由 
            // 全局的权限管理 
        })

        // 后置守卫
        router.afterEach((to, from) => {
            console.log('afterEach - 已经进入当前路由 == ' + to.name )
        });

        // 4. 创建和挂载根实例。
        const vm = new Vue({
            el:"#app",
            router, // this.$router 获取全局的路由对象 
            data:{
                title:"路由初步学习 - 路由嵌套 (微信App) "
            },
            watch:{
                '$route':function(to,from){
                    console.log(to)  // 进入的路由 
                    console.log(from) // 离开的路由 
                }
            },
            mounted(){
                console.log(this.$route)    // 路由信息对象  记录路由的参数相关的信息 
                console.log(this.$router)   // 路由对象   负责路由跳转 和路由导航的 参数配置
            }
        })
    </script>
     <!-- 
        
        嵌套路由  路由嵌套组件  
        你有多少层嵌套就写多少个 router-view     
        配置简单 路由     

        路由守卫   (对路由添加一些包含的业务逻辑)   阻止你进入或者离开当前路由 
        用来判断时候可以进入或者离开当前路由  
        路由导航守卫    分三种   

        a.  全局前置守卫  router.beforeEach(to,from,next)
            全局后置守卫  router.afterEach(to,from)

        b.  路由独享的守卫  beforeEnter(to,from,next)  进入当前路由之前触发 

        c.  路由组件内直接定义以下路由导航守卫  component
            beforeRouteEnter    进入这个组件之前
            beforeRouteUpdate   组件数据更新  
            beforeRouteLeave    离开这个组件之前  

        鉴权管理  +  路由守卫  

        
     -->
</body>
</html>